<template>
	<div id="bankcardPage">
		<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>
		<!--实线-->
		<div class="solid"></div>

		<div class="main">
			<h3>银行卡绑定</h3>
			<div class="bankBox">
				<el-input v-model="bankInfo.cardBank" placeholder="请输入银行名称" type='text'></el-input>
				<el-input v-model="bankInfo.cardNo" placeholder="请输入银行卡号" type='number' :maxlength='20' onmousewheel="return false;"></el-input>
				<el-input v-model="bankInfo.cardPhone" placeholder="请输入银行预留手机号" type='number' onmousewheel="return false;"></el-input>
				<el-input v-model="bankInfo.cardPerson" placeholder="请输入持卡人姓名" type='text' :maxlength='28'></el-input>
				<el-button size="small" @click="changeCard">安全绑定</el-button>
				<!--@keyup.native="checkNum"-->
			</div>
			<h3 v-show="isShow">管理员审核中，请耐心等等......</h3>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				bankInfo: {
					cardNo: '',
					cardPerson: '',
					cardPhone: '',
					cardBank: ''
				},
				isShow: false

			}
		},
		created() {

		},
		methods: {
			//			checkNum() {
			//				let v = this.bankNumber;
			//
			//				if(/\S{5}/.test(v)) {
			//					this.bankNumber = v.replace(/\s/g, '').replace(/(.{4})/g, "$1  ");
			//				}
			//			},
			changeCard() {

				this.$api.changeCard(this.bankInfo).then(res => {
					if(res.data.code == '000000') {
						console.log(res.data)
						this.$message({
							type: "success",
							message: "管理员审核中，请耐心等等......"
						});
						this.isShow = true;

					} else {
						this.$message.error("绑定银行卡失败")
					}
				}).catch(() => {
					this.$message.error("绑定银行卡失败")
				})
			}
		}
	}
</script>

<style lang="less">
	#bankcardPage {
		padding: 20px;
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 100px;
			bottom: -8px;
		}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1 {
			font-size: 25px;
		}
		.solid {
			background-color: black;
			height: 2px;
		}
		.main {
			h3 {
				padding: 10px 30px;
			}
			.bankBox {
				width: 40%;
				min-width: 400px;
				margin: auto;
				margin-top: 40px;
				height: 300px;
				background-color: #ff5842;
				border-radius: 40px;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.el-input {
					/*position: absolute;
					height: 40px;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;*/
					margin: 10px 0;
					input {
						text-align: center;
						font-size: 15px;
					}
				}
				.el-button {
					position: absolute;
					right: 40px;
					bottom: 15px;
					color: black;
				}
			}
		}
	}
</style>
